<template>
  <div>
    <div class="container_form">
      <form class="form">
        <h2 class="form_title">Sign Up</h2>
        <input type="text" placeholder="User" class="input" />
        <input type="password" placeholder="Password" class="input" />
        <input type="email" placeholder="Email" class="input" />

        <button class="btn" @click="toLogin">Sign Up</button>
      </form>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const toLogin = () => {
  router.push('/login')
}

</script>
<style lang='scss' scoped>
@font-face {
  font-family: Rainbow;
  src: url("../../assets/fonts/MorningRainbow.ttf");
}
.container_form {
  // background-color: pink;
  height: 100vh;
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

    &_title {
      font-family: Rainbow;
      font-size: 30rem;
      // margin-bottom: 100rem;
      transform: translateY(-20rem);
    }

    .input {
      height: 40rem;
      border-radius: 5rem;
      width: 80vw;
      text-indent: 10rem;
      margin: 5rem 0;
    }
    .btn {
      margin-top: 10rem;
      width: 120rem;
      height: 40rem;
      font-size: 16rem;
      border-radius: 20rem;
      border: 2px solid black;
    }
  }
}
</style>